@import './base.css';

#app {
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  font-weight: normal;
}

/* === 全局动画定义 === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.5s ease-in-out forwards;
}

/* === Element Plus 组件美化 === */

/* Card 卡片 - 实现毛玻璃效果 */
.el-card {
  border-radius: 20px !important;
  /* 更大的圆角 */
  border: 1px solid var(--vt-c-border-color) !important;
  box-shadow: var(--shadow-1) !important;
  transition: all 0.3s ease-in-out;
  overflow: hidden;
  /* 确保子元素遵循父元素的圆角 */

  /* --- 主题核心改动 --- */
  background-color: var(--vt-c-bg-soft) !important;
  /* 应用半透明背景 */
  backdrop-filter: blur(12px);
  /* 关键的模糊效果 */
  -webkit-backdrop-filter: blur(12px);
}

.el-card:hover {
  box-shadow: var(--shadow-2) !important;
  transform: translateY(-5px);
}

.el-card__header {
  font-size: 16px;
  font-weight: 600;
  color: var(--vt-c-text-1);
  background-color: transparent !important;
  /* 卡片头部设为透明，与卡片融为一体 */
  border-bottom: 1px solid var(--vt-c-border-color) !important;
  padding: 16px 24px !important;
}

/* Button 按钮 */
.el-button {
  border-radius: 10px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  border: none !important;
}

.el-button.el-button--primary {
  color: var(--vt-c-white) !important;
  background: var(--color-primary) !important;
  box-shadow: 0 4px 8px -2px rgba(79, 70, 229, 0.3);
}

.el-button.el-button--primary:hover {
  background: var(--color-primary-light) !important;
  box-shadow: var(--shadow-primary-hover);
  transform: translateY(-2px);
}

.el-button.el-button--danger {
  background-color: var(--color-danger) !important;
  color: var(--vt-c-white) !important;
}

.el-button.el-button--success {
  background-color: var(--color-success) !important;
  color: var(--vt-c-white) !important;
}

/* Table 表格 */
.el-table {
  --el-table-header-bg-color: transparent !important;
  --el-table-tr-bg-color: transparent !important;
  --el-table-row-hover-bg-color: rgba(238, 242, 255, 0.7) !important;
  border-radius: 12px;
  overflow: hidden;
  background-color: transparent !important;
}

.el-table th.el-table__cell {
  font-weight: 600;
  color: var(--vt-c-text-1);
  background-color: transparent !important;
}

.el-table td.el-table__cell,
.el-table th.el-table__cell {
  border-bottom: 1px solid var(--vt-c-border-color) !important;
  padding: 18px 0 !important;
  /* 增加内边距以获得更多空间 */
  background-color: transparent !important;
}

/* Page Header 页头 */
.el-page-header__header {
  height: auto;
  line-height: 1.5;
}

.el-page-header__title,
.el-page-header__content {
  font-size: 18px;
  font-weight: 600;
}

/* =================================== */
/* === 新增：无障碍模式样式 === */
/* =================================== */
html.accessibility-mode {
  /* 1. 显著增大基础字号，所有使用 rem 单位的元素都会等比例放大 */
  font-size: 20px !important;

  /* 2. 增强色彩对比度 */
  --vt-c-text-1: #000000;
  --vt-c-text-2: #111111;
  --vt-c-bg-soft: #ffffff;
  --vt-c-bg-mute: #f5f5f5;
  --vt-c-bg-gradient: #ffffff;
  --vt-c-border-color: #bbbbbb;
  --vt-c-border-color-light: #cccccc;
  --color-primary: #0052cc;
  --color-primary-light: #0066ff;
}

/* 3. 针对特定组件进行微调，确保放大后布局依然协调 */
html.accessibility-mode .el-card__header {
  font-size: 1.2rem;
}

html.accessibility-mode .el-button {
  font-size: 1rem;
}

html.accessibility-mode .el-table {
  /* 增加行高，避免文字拥挤 */
  --el-table-row-height: 60px;
}